<!DOCTYPE html>
<html lang="en">

<head>

  <script src="js/jquery-3.3.1.js"></script>
    <script src="js/app1.js"></script>
    <meta charset="utf-8">
    <title>Matching Game</title>
    <meta name="description" content="">
    <link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
    <link rel="stylesheet prefetch" href="https://fonts.googleapis.com/css?family=Coda">
    <link rel="stylesheet" href="css/app.css">
</head>

<body>

    <div class="container">
        <header>
            <h1>Matching Game</h1>
        </header>

        <section class="score-panel">

            <ul class="stars" id="stars-three">
                <li><i class="fa fa-star" id="star1"></i></li>
                <li><i class="fa fa-star" id="star2"></i></li>
                <li><i class="fa fa-star" id="star3"></i></li>
            </ul>
            <span class="moves">3 Moves</span>
            <div class="restart">
                <i class="fa fa-repeat"></i>
            </div>
            <div>
                <p style="float:right; display:inline;">
                    You have used steps is
                    <i id="steps">0</i>
                </p>
                <p style="float:left; display:inline;padding:100 px;">Used time is
                    <i id="timer">0<i>
              </p>
        	</div>
        </section>

        <ul class="deck" id="squar">
            <li  class="card">
                <i id="square0" class="fa fa-anchor" ></i>
                    </li>
                    <li class="card">
                        <i id="square1" class="fa fa-paper-plane-o"></i>
                    </li>
                    <li class="card match">
                        <i id="square2" class="fa fa-anchor"></i>
                    </li>
                    <li class="card">
                        <i id="square3" class="fa fa-bolt"></i>
                    </li>
                    <li class="card">
                        <i id="square4" class="fa fa-cube"></i>
                    </li>
                    <li class="card match">
                        <i id="square5" class="fa fa-anchor"></i>
                    </li>
                    <li class="card">
                        <i id="square6" class="fa fa-leaf"></i>
                    </li>
                    <li class="card">
                        <i id="square7" class="fa fa-bicycle"></i>
                    </li>
                    <li class="card">
                        <i id="square8" class="fa fa-diamond"></i>
                    </li>
                    <li class="card">
                        <i id="square9" class="fa fa-bomb"></i>
                    </li>
                    <li class="card">
                        <i id="square10" class="fa fa-leaf"></i>
                    </li>
                    <li class="card">
                        <i id="square11" class="fa fa-bomb"></i>
                    </li>
                    <li class="card open show">
                        <i id="square12" class="fa fa-bolt"></i>
                    </li>
                    <li class="card">
                        <i id="square13" class="fa fa-bicycle"></i>
                    </li>
                    <li class="card">
                        <i id="square14" class="fa fa-paper-plane-o"></i>
                    </li>
                    <li class="card">
                        <i id="square15" class="fa fa-cube"></i>
                    </li>
                    </ul>
            </div>


            <div class="containerWin winD" id="Winwindow">
                <header>
                    <h1 style="font-style:italic;
            font-family: sans-serif;
            font-size:50px;
            font-weight:800;
            color: #fff;
            text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de;">
                        You are win
                    </h1>
                </header>

                <section class="score-panel" style="text-align:center;">

                    <ul class="stars" id="stars-three">
                        <li><i class="fa fa-star" id="star11"></i></li>
                        <li><i class="fa fa-star" id="star22"></i></li>
                        <li><i class="fa fa-star" id="star33"></i></li>
                    </ul>
                    <span class="moves">3 Moves</span>
                    <div>
                        <h1 style="font-style:italic;
            text-align:center;
            font-family: sans-serif;
            font-size:20px;
            font-weight:800;
            color: #fff;
            text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #445252, 0 0 40px #ff00de, 0 0 70px #ff00de;">Do you like paly again</h1>
                    </div>
                    <div>
                        <p>
                            You have used steps is
                            <i id="Endsteps">0</i>
                        </p>
                        <p>Used time is
                            <i id="Endtimes">0<i>
             </p>
         </div>
        </section>

        <div class="restartWin">
        <i class="fa fa-repeat"></i>
                    </div>


            </div>


</body>

</html>
